


How to make a fanfic header Ao3 Style inside your own fanfic

by ElectricAlice



Series: CSS code scripts for Ao3 [3]
Category: Archive of Our Own
Genre: Fanwork Research & Reference Guides, Work Skin, ao3 skin
Language: English
Status: Completed
Published: 2020-09-26
Updated: 2020-09-26
Packaged: 2021-03-07 18:28:43
Rating: General Audiences
Warnings: No Archive Warnings Apply
Chapters: 1
Words: 714
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/26662207
Author URL: https://archiveofourown.org/users/ElectricAlice/pseuds/ElectricAlice
Summary: Live example and tutorial on how to insert a fanfic header + fic tags + summary in your fanfic. In perfect ao3 style.If you need your own fic to go extra meta.
Series: CSS code scripts for Ao3 [3]
Series URL: https://archiveofourown.org/series/1940026
Comments: 4
Kudos: 20
Collections: A Guide to Coding and Fanworks, Fanfiction Reference Works, HTML & CSS stuffs





	How to make a fanfic header Ao3 Style inside your own fanfic

This script will fit the ao3 fic header inside your own fanfic. It's fun to use for meta fanfictions if your character likes to write fics on the side.

First created and used for a fic I did with Janie_tangerine: [toss a prompt to your social media manager](https://archiveofourown.org/works/22695892) where Jaskier writes RPF fanfics about Geralt and Jennefer. You can see it working in there too.

The **links and the buttons do the proper ao3 animation when you hover over them** and can be made to function (you'll just need to add all the urls yourself)

  
Download Share Comments  


Rating: 
     Explicit
[Archive Warnings](https://archiveofourown.org/tos_faq#tags): 
     Creator Chose Not To Use Archive Warnings, No Archive Warnings Apply
Category: 
     F/M, M/M
Fandoms: 
     Pride and Prejudice - Jane Austen, Pride and Prejudice & Related Fandoms
Relationships: 
     Elizabeth Bennet/Fitzwilliam Darcy, Charles Bingley/Fitzwilliam Darcy, Elizabeth Bennet/Charles Bingley/Fitzwilliam Darcy
Characters: 
     Elizabeth Bennet, Fitzwilliam Darcy, Charles Bingley
Additional Tags: 
     Plot What Plot/Porn Without Plot, Explicit Sexual Content, I Blame Tumblr, Bottom Darcy, Threesome - F/M/M, Desire, Public sex, Established relationship, Post wedding, Sort of angsty
Language: 
     English 
Stats:
     Published: 2019-09-07 Words: 6780 Chapters: 1/1 Comments: 25 Kudos:405 Bookmarks:34 Hits: 1637

##  Me, I want relief (Tonight) 

###  Roll-Jane-roll 

### Summary:

During a ball Bingley and Lizzy lead Darcy in a dark corner. 

### Notes:

I blame tumblr for all of it.  
Disclaimer: I own nothing. I certainly do not own Jane Austen's characters. Please Jane I hope you'll forgive me for my sins. 

  
  
\-----------  
  


It is quite easy to achieve. It requires 2 parts: HTML code and a workskin in css. You'll find the codes for both in [here on github](https://github.com/electricalice/fic-header-workskin) .

# How to use it

## Set up a new work skin

This is easy don't worry. Ao3 makes it really fast.

  * Go to your **dashboard** on Ao3 and then on the right you'll find **"Skins"**. Click on there 
  * On the left there's a button **"Create site Skin"**
  * Set the **Type** as **'Workskin'** , this is important! 
  * Add a title for you to remember it (something like 'Fic Header' should work fine) 
  * Now Scroll and copy paste [this code](https://github.com/electricalice/fic-header-workskin/blob/master/workskin-code.css) in the part labelled **"CSS"**
  * Now press submit! 
  * This is it! 



Now your workskin is set and if you want you can use it for multiple fanfic. You don't need to set it up multiple times!

## How to modify the header to suit your needs

  * Go and take [this code here](https://github.com/electricalice/fic-header-workskin/blob/master/header-code.html) and **copy-paste it in a text editor**. Notepad works just fine, **but anything that will highlight the html will be easier to work with** (there are also several online editor. Just google 'html online editor' and you'll find plenty). Ao3 editor is not the best to make those changes and it will remove all the comments as soon as you click 'preview', making it harder to make the changes. 
  * I put **comment on all the parts where you should edit stuff**. Hopefully they are self-explanatory. 
  * To make the work tags work proper (so, become red when you hover over them) and have the right spacing between them **you'll need to keep the html sort of intact**. 
    * Each tag should look like this: `<span><a href="#">Text of the tag</a>,</span>`
    * the comma can be removed when it's the last tag in the line. 
    * it should have both the `<span>` and the `<a>` as both are needed 
    * change the `href="#"` if you want to add a functioning link. You can leave it like those if you want to, the links will still look real but nothing will happen if someone clicks on them 
  * **Title, Author, Summary and Author notes should be self explanatory**. You can use normal html inside (so, `<br>` if you want to break line, `<b>` for bold and `<I>` for italics 
  * Now save your text somewhere and you can add the code to your fic! 
    * go edit your fic 
    * find the option **"Select Work Skin"** and find in the dropdown menu the workskin you saved earlier. 
    * make sure you are **on html mode** and not Rich Editor (you should be, by default) 
    * **copy paste** all your code in the point of the story where you want to put the header 



And this is it. Be sure to preview your work, as something might have happened that made everything wonky!


End file.
